அடுத்தது

Angular Introduction

Angular ஐப் பயன்படுத்தி அளவிடக்கூடிய ஒற்றைப் பக்க பயன்பாடுகளை உருவாக்குவது

Angular என்றால் என்ன?

Angular என்பது TypeScript ஐப் பயன்படுத்தி வலைப் பயன்பாடுகளை உருவாக்குவதற்கான முழுமையான முன்-முனை கட்டமைப்பாகும்.

TypeScript அடிப்படையிலானது

ஆங்குலர் TypeScript ஐப் பயன்படுத்துகிறது, இது JavaScript இன் ஒரு சூப்பர்செட் ஆகும், இது நிலையான தட்டச்சு மற்றும் மேம்பட்ட பொருள்நோக்கு அம்சங்களை வழங்குகிறது.

கூறுகள் மற்றும் டெம்ப்ளேட்டுகள்

ஆங்குலர் கூறு-அடிப்படையிலான கட்டமைப்பைப் பயன்படுத்துகிறது, இதில் ஒவ்வொரு கூறும் அதன் சொந்த HTML டெம்ப்ளேட், CSS பாணிகள் மற்றும் TypeScript தர்க்கத்தைக் கொண்டுள்ளது.

முழுமையான அம்சங்கள்

ஆங்குலர் உள்கட்டமைப்பு, படிவங்கள், HTTP கிளையன்ட், டிபெண்டென்சி இன்ஜெக்ஷன் மற்றும் வழிசெலுத்தல் போன்ற கட்டமைக்கப்பட்ட அம்சங்களை வழங்குகிறது.

ஸ்டேண்டலோன் APIs

புதிய பதிப்புகள் NgModules தேவையின்றி நேரடியாக கூறுகளை இறக்குமதி செய்ய அனுமதிக்கின்றன, குறியீட்டை எளிமையானதாகவும் குறைவாக வாக்குமூலமாகவும் ஆக்குகின்றன.

ஒற்றைப் பக்க பயன்பாடுகளுக்கு (SPAs) சிறந்தது

ஆங்குலர் டைனமிக், பக்கம் மறுஏற்றம் இல்லாத பயன்பாடுகளை உருவாக்குவதற்கு சிறந்தது, இது பயனர் அனுபவத்தை மேம்படுத்துகிறது.

Angular எப்படி செயல்படுகிறது

Angular உங்கள் டெம்ப்ளேட்டுகளை திறமையான JavaScript ஆகத் தொகுத்து, உங்கள் கூறு நிலை மாறும்போது DOM ஐப் புதுப்பிக்கிறது.

HTML-அடிப்படையிலான டெம்ப்ளேட்டுகள்

HTML ஐப் பயன்படுத்தி உங்கள் பயனர் இடைமுகத்தை வரையறுக்கவும், ஆங்குலர் குறிப்பிட்ட தொடரியலைச் சேர்த்து டைனமிக் உள்ளடக்கத்தை அனுமதிக்கிறது.

தரவு பைண்டிங்

உங்கள் TypeScript குறியீட்டிலிருந்து உங்கள் HTML வரை தரவைப் பிணைக்க இடைச்செருகல் மற்றும் டைரக்டிவ்களைப் பயன்படுத்தவும்.

நிகழ்வு கையாளுதல்

முறை நிகழ்வுகள் மற்றும் பயனர் உள்ளீட்டைக் கையாள டெம்ப்ளேட் நிகழ்வு பைண்டிங்கைப் பயன்படுத்தவும்.

தரவு பெறுதல்

HttpClient ஐப் பயன்படுத்தி சேவையகங்களிலிருந்து தரவைப் பெறுங்கள், பொதுவாக டைப்ஸ்கிரிப்ட் Obserservables மூலம்.

ஆங்குலர் புதுப்பிப்புகள்:

ஆங்குலர் ஒரு சேன்ஞ் டிடெக்ஷன் அல்காரிதத்தைப் பயன்படுத்துகிறது, இது உங்கள் பயன்பாட்டு நிலை மாறும்போது மட்டுமே DOM ஐப் புதுப்பிக்கிறது, செயல்திறனை மேம்படுத்துகிறது.

நீங்கள் ஏற்கனவே தெரிந்து கொள்ள வேண்டியவை

ஆங்குலரைக் கற்றுக்கொள்ளத் தொடங்குவதற்கு முன், நீங்கள் பின்வருவனவற்றை அறிந்திருக்க வேண்டும்:

HTML

வலைப்பக்க கட்டமைப்பு, டேக்ஸ் தொடரியல் மற்றும் செமான்டிக் உறுப்புகள்

CSS

ஸ்டைலிங், லேஅவுட்கள், பதவி மற்றும் பதிலளிக்கும் வடிவமைப்பு

JavaScript

நிரலாக்க அடிப்படைகள், DOM கையாளுதல் மற்றும் நவீன JavaScript அம்சங்கள்

அடிப்படை TypeScript

வகைகள், இடைமுகங்கள், வகுப்புகள் மற்றும் மாடுல்கள் (அறிமுகப்படுத்தும்)

முக்கிய குறிப்பு:

ஆங்குலர் TypeScript ஐப் பயன்படுத்துகிறது, எனவே JavaScript ஐ நன்கு புரிந்துகொள்வது முக்கியம். TypeScript அறிமுகப்படுத்தும், ஆனால் JavaScript கருத்துகளைப் புரிந்துகொள்வது கற்றலை எளிதாக்கும்.

Angular எடுத்துக்காட்டு

உங்கள் சொந்த ஆங்குலர் சேவையகத்தைப் பெறுங்கள்:

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
Welcome to Angular!
`
})
export class App {}

bootstrapApplication(App);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Angular App</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>

குறியீடு விளக்கம்:

  • @Component decorator ஆங்குலர் கூறை வரையறுக்கிறது
  • selector HTML இல் கூறைப் பயன்படுத்துவதற்கான பெயரைக் குறிப்பிடுகிறது
  • standalone: true NgModule தேவையின்றி கூறு நேரடியாகப் பயன்படுத்தப்படலாம் என்பதைக் குறிக்கிறது
  • template கூறின் HTML கட்டமைப்பை வரையறுக்கிறது
  • bootstrapApplication() ஆங்குலர் பயன்பாட்டைத் தொடங்குகிறது

பயிற்சி

உங்கள் அறிவைச் சோதிக்க இந்தப் பயிற்சியை முயற்சிக்கவும்:

❓Angular என்பது ஒரு:

நூலகம் (Library)
✗ தவறானது! ரியாக்ட் ஒரு நூலகம், ஆனால் ஆங்குலர் ஒரு முழுமையான கட்டமைப்பு
கட்டமைப்பு (Framework)
✓ சரி! ஆங்குலர் TypeScript இல் எழுதப்பட்ட முன்-முனை கட்டமைப்பு ஆகும்
நிரலாக்க மொழி (Programming Language)
✗ தவறானது! ஆங்குலர் ஒரு நிரலாக்க மொழி அல்ல, இது TypeScript/JavaScript இல் உருவாக்கப்பட்ட கட்டமைப்பு

பயிற்சி குறிப்பு:

ஆங்குலர் ஒரு கட்டமைப்பாகும், ஏனெனில் இது வழிகாட்டப்பட்ட கட்டமைப்பு, படிவங்கள், வழிசெலுத்தல் மற்றும் டிபெண்டென்சி இன்ஜெக்ஷன் போன்ற பல உள்ளமைக்கப்பட்ட அம்சங்களை வழங்குகிறது. நூலகங்கள் (React போன்றவை) குறைந்த கட்டுப்பாடு மற்றும் அதிக நெகிழ்வுத்தன்மையை வழங்குகின்றன.

அடுத்தது